<template>
  <div class="login">
    <div class="loginTop">欢迎登录</div>
    <div class="loginContent">
      <input
        type="text"
        name="phone"
        class="phone"
        id=""
        v-model.lazy="phone"
        placeholder="请输入手机号码"
      />
      <input
        type="password"
        name="password"
        class="password"
        v-model.lazy="password"
        placeholder="请输入密码"
      />
      <button class="btn" @click="Login">登录</button>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
     phone:'',
     password:''
    };
  },

  methods: {
    Login(){
       this.$store.commit('updateToken',this.phone)//由于接口错误，自定义一个token
      //  由于确定会返回token值跳转到个人中心，所以让底部组件展示
      this.$store.commit('updateIsFooterShow',true)
      this.$store.commit('updateIsLogin',true)
      this.$router.push('/infoUser')
    }
  },
};
</script>

<style lang='less' scoped>
.login {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-content: center;
  justify-content: center;
  text-align: center;
  background-color: rgb(248, 97, 97);
  height: 13.34rem;
  .loginTop {
    margin-bottom: 0.4rem;
    height: 1rem;
    line-height: 1rem;
    color: white;
    font-size: 0.6rem;
  }
  .loginContent {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    input {
      display: block;
      width: 70%;
      height: 0.6rem;
      margin-bottom: 0.4rem;
    }
  }
}
</style>